<!--
 * new page
 * @author: YK
 * @since: 2024-01-12
 * index.vue
-->
<template>
  <el-popover
    placement="bottom-start"
    :width="430"
    trigger="click"
    v-model:visible="visible"
  >
    <template #reference>
      <div class="result">
        <div>{{ result }}</div>
        <div>
          <el-icon-arrow-down :class="{ rolate: visible }"></el-icon-arrow-down>
        </div>
      </div>
    </template>
    <div class="container">
      <el-row align="center">
        <el-col :span="8">
          <el-radio-group v-model="radioValue" size="small">
            <el-radio-button label="按城市" />
          </el-radio-group>
        </el-col>
        <el-col :span="15">
          <el-select
            v-model="selectValue"
            placeholder="请搜索城市"
            size="small"
            style="margin-top: 4px"
            filterable
            :filter-method="filterMethod"
            @change="handleSelectChange"
          >
            <el-option
              v-for="item in options"
              :key="item.code"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-col>
      </el-row>
      <template v-if="radioValue === '按城市'">
        <div class="city">
          <!-- <div v-for="(value,key) in citys ">{{ key }}</div>     -->
          <div
            class="city-item"
            @click="clickChat(item)"
            v-for="item in Object.keys(citys)"
          >
            {{ item }}
          </div>
        </div>
        <el-scrollbar max-height="300px">
          <template v-for="(value, key) in citys" :key="key">
            <el-row style="margin-bottom: 10px" :id="key">
              <el-col :span="2">{{ key }}:</el-col>
              <el-col class="city-name" :span="22">
                <div
                  @click="clickItem(item)"
                  class="city-name-item"
                  v-for="item in value"
                  :key="item.code"
                >
                  <div>{{ item.name }}</div>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-scrollbar>
      </template>
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import cityData from "./lib/cityData";
import type { City } from "./type";

const emits = defineEmits<{
  (e: "selectCity", value: City): void;
}>();
const result = ref<string>("请选择");
const visible = ref<boolean>(false);

const radioValue = ref<string>("按城市");
const selectValue = ref<string>("");
const options = ref<City[]>([]);
const citys = ref(cityData.cities);
const clickItem = (item: City) => {
  console.log(item, "?");
  result.value = item.name;
  emits("selectCity", item);
  visible.value = false;
};
//点击字母区域
const clickChat = (item: string) => {
  let el = document.getElementById(item);
  if (el) el.scrollIntoView({ behavior: "smooth" });
};
onMounted(() => {
  //获取下拉框城市数据
  console.log(citys.value);
  let values = Object.values(citys.value).flat(2);
  options.value = values;
});
//自动以搜索
const filterMethod = (val: string) => {
  if (val == "") {
    let values = Object.values(citys.value).flat(2);
    options.value = values;
  } else {
    if (radioValue.value === "按城市") {
      //中文拼音一起过滤
      let values = Object.values(citys.value)
        .flat(2)
        .filter((item: City) => {
          return item.name.includes(val) || item.pinyin.includes(val);
        });
      options.value = values;
    }
  }
};
const handleSelectChange = (val: string) => {
  const item = options.value.find((item: City) => item.name === val);
  if (item) {
    result.value = item.name;
    emits("selectCity", item);
  }
};
</script>

<style scoped lang="scss">
.result {
  display: flex;
  align-items: center;
  width: fit-content;
  cursor: pointer;
}
.rolate {
  transform: rotate(180deg);
}
svg {
  width: 1em;
  height: 1em;
  position: relative;
  top: 2px;
  margin-left: 4px;
  transition: all 0.3s linear;
}
.container {
  padding: 6px;
  box-sizing: border-box;
}
.city {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
  .city-item {
    padding: 3px 6px;
    margin-right: 8px;
    border: 1px solid #eee;
    margin-bottom: 8px;
    cursor: pointer;
  }
}
.city-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  cursor: pointer;
  .city-name-item {
    margin-right: 6px;
    margin-bottom: 6px;
  }
}
</style>
./lib/cityData
